<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="com.google.appengine.api.channel.ChannelService" %>
<%@ page import="com.google.appengine.api.channel.ChannelServiceFactory" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
	<head>
		<title>Chat Room</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="/_ah/channel/jsapi"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="/css/channelchat.css"/>
	</head>	
	<body>
<%
    UserService userService = UserServiceFactory.getUserService();
    User user = userService.getCurrentUser();
    if (user != null) {
%>
<div>
	<span>Hello, <%= user.getNickname() %>! (You can
	<a href="<%= userService.createLogoutURL(request.getRequestURI()) %>">sign out</a>.)</span>
	<select id="draw_type" style="margin-left: 643px;width: 100px;">
		<option value="pen">Pen</option>
		<option value="line">Line</option>
		<option value="circle">Circle</option>
		<option value="arc">Arc</option>
	</select>
</div>
<div class="m_b_black_board">
	<canvas id="black_board" width="1025" height="300" style="position:absolute;border:1px solid #c3c3c3;top:0;left:0;">
	<p>Your browser doesn't support canvas.</p>
	</canvas>
	<canvas id="black_board_buffer" width="1025" height="300" style="position:absolute;border:1px solid #c3c3c3;top:0;left:0;">
	</canvas>
</div>
<div style="margin-top: 10px">
	<button id="bt_save">Save</button>
	<button id="bt_restore">Restore</button>
</div>
<script>
	sEmail = '<%= user.getEmail() %>';
</script>
<div style="height: 300px; margin-top: 10px">
	<div id="chat_story">
		<div id="view_old_link"><a href="javascript:void(0)" onclick="getOldMessages()">View Old Messages</a></div>
	</div>
	<div id="user_online"></div>
</div>  
<div style="margin-top:10px;">
    <div style="float: left;">
    	<textarea id="msg_box" name="content" style="width:717px; height:66px;font-family: Helvetica Neue,Helvetica,Arial,sans-serif;font-size: 12px;font-weight: normal;"></textarea>
   	</div>
    <div style="margin-left: 10px; float: left;"><input type="button" value="Send" onclick="sendMessageChat()" style="width: 80px; height: 73px;" /></div>
</div>
 <div style="margin-left: 10px; float: left;">
	<input type="button" value="Clear All" onclick="clearMessageChat()" style="width: 80px; height: 73px;" />
</div>
<script src="/js/siglaz.js"></script>
<!-- <script src="/js/fabricjs.js"></script> -->
<script src="/js/channelchat.js"></script>
<!-- <script src="/js/blackboard.js"></script> -->
<!-- <script src="/js/curve.js"></script> -->
<%
    } else {
%>
<p>Hello! Please 
<a href="<%= userService.createLoginURL(request.getRequestURI()) %>">sign in</a>
to chat with us.</p>
<%
    }
%>
	 </body>
</html>